<template>
	<view class="content">
		<u-tabs :list="list1" :activeStyle="{
		            color: '#AC7D3D',
								fontWeight:700,
								fontSize:'32rpx'
		        }" 
						keyName="title"
						:inactiveStyle="{
						            fontWeight:700,
												fontSize:'32rpx'
						        }" lineWidth="200rpx" lineHeight="10rpx" lineColor="#AC7D3D" @click="click" :scrollable="false"></u-tabs>
		<view class="challenge_item" v-for="(item ,index) in onlineList" @click="nav_(item.id)">
			<image :src="item.user_pic" mode=""></image>
			<view class="num">
				<view class="" style="display: flex;">
					<u-icon name="share-fill"></u-icon>
				<text>
					{{item.num_share}}次
				</text>
				</view>
				
				<text>({{item.count}})已完成</text>
			</view>
			<view class="time">
				<text>发起时间</text>
				<text>{{item.time}}</text>
			</view>
			<view class="icon">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="initiate" @click="createdOnline()">
			发起新的挑战
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [],
				onlineList: [],
				type_id:1
			}
		},
		onShow() {
			this.$myRuquest('home/online/online_type').then(res=>{
				this.list1=res.data
			})
			this.upData()
		},
		methods: {
			upData() {
				
				this.$myRuquest('home/online/online_list', {
					type_id:this.type_id
				}).then(res => {
					this.onlineList = res.data
				})
			},
			click(e) {
				console.log(e)
				this.type_id=this.list1[e.index].id
				this.upData()
			},
			createdOnline() {
				this.$myRuquest('home/online/online_save', {
					type_id: this.type_id
				}).then(res => {
					this.nav(res.data.online.id)
				})
			},
			nav_(onlineId) {
				uni.navigateTo({
					url: `./challengeItemList?onlineId=${onlineId}&type=${this.type_id}`
				})
			
			},
			nav(onlineId) {
				let path='challengeing'
				if(this.type_id==2) path='challengeingVideo'
				uni.navigateTo({
					url: `./challengeing/${path}?onlineId=${onlineId}`
				})

			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #FAFAFA;
		min-height: 100vh;
		padding-bottom: 160upx;
	}

	.challenge_item {
		display: flex;
		margin-top: 20upx;
		background-color: #FFFFFF;
		padding: 26upx 30upx;

		image {
			width: 160upx;
			height: 160upx;
			margin-right: 30upx;
		}

		.num {
			flex: 3;
			font-size: 28upx;
			color: #666666;
			font-weight: 700;

			>text {
				color: #AC7D3D;
			}

		}

		.time {
			flex: 5;
			font-size: 28upx;
			color: #333333;
			font-weight: 700;

			text:nth-child(2) {
				color: #666666;
			}
		}

		.num,
		.time {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.icon {
			align-items: center;
			display: flex;
			flex: 1;
		}
	}

	.initiate {
		width: 368upx;
		height: 80upx;
		background-color: #FED194;
		color: #AC7D3D;
		line-height: 80upx;
		text-align: center;
		border-radius: 40upx;
		position: fixed;
		bottom: 40upx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
